<template>
	<view class="container">
		<com-head textTit="门店" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 搜索 -->
		<view class="serchBox">
			<u-icon name="search" color="#999999" size="26"></u-icon>
			<input type="text" @input="serchList()" v-model.trim="title" placeholder="搜索门店名称" placeholder-style="color:#999999"/>
		</view>
		<!-- 当前门店 -->
		<view class="presentShop common" >
			<view class="title">当前门店</view>
			<view class="list">
				<view class="list__left">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg6.png"></image>
				</view>
				<view class="list__right">
					<image class="list__right-img" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dui.png"></image>
					<view class="listT">
						<text>{{defaultAddress.title}}</text>
					</view>
					<view class="list-fen">
						<u-rate :size="24" :current="defaultAddress.score || 0" active-color="#E5C372" inactive-color="#E0E0E0" inactive-icon="star-fill" disabled></u-rate>
						<text class="list-fen-size">{{Number(defaultAddress.score || 0).toFixed(1) || "暂无评分"}}</text>
					</view>
					<view class="listB">
						<text class="dec">{{defaultAddress.position}}</text>
						<view class="right">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weizhi333.png"></image>
							<text>{{defaultAddress.distance_km}}km</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 门店列表 -->
		<view class="shopList common" v-if="list.length > 0">
			<view class="title">门店列表</view>
			<view class="list" v-for="(ele,index) in list" :key="index">
				<view class="list__left">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg6.png"></image>
				</view>
				<view class="list__right">
					<!-- v-if="ele.id !== defaultAddress.id" -->
					<view class="list__right-xuan" @click="chioseStore(ele,index)">
						选择
					</view>
					<!-- <image v-else class="list__right-img" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/dui.png"></image> -->
					<view class="listT">
						<text>{{ele.title}}</text>
					</view>
					<view class="list-fen">
						<u-rate :size="24" :current="ele.score || 0" active-color="#E5C372" inactive-color="#E0E0E0" inactive-icon="star-fill" disabled></u-rate>
						<text class="list-fen-size">{{Number(ele.score || 0).toFixed(1) || "暂无评分"}}</text>
					</view>
					<view class="listB">
						<text  class="dec">{{ele.position}}</text>
						<view class="right">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weizhi333.png"></image>
							<text>{{ele.distance_km || '-'}}km</text>
						</view>
						<!-- <text @click="chioseStore(ele,index)" class="iconfont " :class="activeIndex == index ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></text> -->
					</view>
				</view>
			</view>
		</view>
	
		<!-- 没有门店 -->
		<view class="noShop" v-if="!list.length">
			<text>没有查询到更多门店信息</text>
			<!-- <text @click="isCheck = !isCheck" class="iconfont " :class="isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></text> -->
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex:0,
				isCheck:false,
				list:[
					// {title: '测撒点萨芬', distance: '213', position: '123'}, {title: '测撒点萨芬', distance: '213', position: '123'}, {title: '测撒点萨芬', distance: '213', position: '123'},
					],
				type:0,
				time: "",
				title:'',
				scrollTop: 0
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({type}) {
			this.type = type
			this.getStore()
			console.log(444, this.defaultAddress)
		},
		methods: {
			// 搜索商品
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getStore()
				}, 800);
			},
			// 选择门店
			async chioseStore(ele,index){
				let end_time = ele.end_time.split(":");
				let start_time = ele.start_time.split(":");
				ele.end_time = end_time[0] + ":" + end_time[1];
				ele.start_time = start_time[0] + ":" + start_time[1];
				
				this.$u.vuex("store_id",ele.id)
				// 更换token/
				let {data,code} = await this.$u.api.checkStoreGetToken();
				if (code) {
					this.$u.vuex('token', data)
					
					if(this.type == 1){
						this.$u.vuex("defaultAddress",ele)
						this.$u.vuex("store_id",ele.id)
						this.$u.vuex("makeStoreInfo",ele)
						this.$u.vuex("makeStore_id",ele.id)
						this.$u.vuex("toStore",ele)
						this.$u.vuex("toStore_id",ele.id)
						this.utlis.backPage()
					}else if(this.type == 2){
						this.$u.vuex("toStore",ele)
						this.$u.vuex("toStore_id",ele.id)
						this.utlis.backPage()
					}else{
						this.$u.vuex("makeStoreInfo",ele)
						this.$u.vuex("makeStore_id",ele.id)
						this.utlis.backPage()
					}
					this.activeIndex = index
				}
			},
			// 获取门店列表
			async getStore(){
				let pls = []
				wx.getStorage({
					key: 'userLocation',
					success: async (res) => {
					  pls = res.data.split(',')
					  console.log(55, pls)	  
						let {data,code} = await this.$u.api.getStore({
							title:this.title,
							lon: pls[0],
							lat: pls[1]
						});
						if(this.isAuth){
							// data.forEach((ele,index)=>{
							// 	ele.distance = this.getDistance(this.currentLocation.latitude,this.currentLocation.longitude,ele.latitude,ele.longitude)
							// 	ele.distance2 = this.getDistance(this.currentLocation.latitude,this.currentLocation.longitude,ele.parking_latitude,ele.parking_longitude)
							// })
							// var min;
							// for(var i=0; i<data.length; i++){
							// 	for(var j=i; j<data.length;j++){
							// 		if(data[i].distance*1>data[j].distance*1){
							// 		  min=data[j];
							// 		  data[j]=data[i];
							// 		  data[i]=min;
							// 		}
							// 	}
							// }
							this.list = data
							console.log(this.list,this.list)
							this.list.forEach((ele,index)=>{
								if(this.type == 1){
									if(this.defaultAddress.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}else if(this.type == 2){
									if(this.toStore.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}else{
									if(this.makeStoreInfo.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}
								
							})
						}else{
							this.list = data
							this.list.forEach((ele,index)=>{
								// ele.distance = 0
								if(this.type == 1){
									if(this.defaultAddress.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}else if(this.type == 2){
									if(this.toStore.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}else{
									if(this.makeStoreInfo.id == ele.id){
										this.activeIndex = index
									}else{
										data.isCheck = false
									}
								}
								
							})
						}
					
					},
				})
			},
			 // 计算距离函数
			  Rad(d) { 
			    //根据经纬度判断距离
			    return d * Math.PI / 180.0;
			  },
			  getDistance(lat1, lng1, lat2, lng2) {
			      // lat1用户的纬度
			      // lng1用户的经度
			      // lat2商家的纬度
			      // lng2商家的经度
			      var radLat1 = this.Rad(lat1);
			      var radLat2 = this.Rad(lat2);
			      var a = radLat1 - radLat2;
			      var b = this.Rad(lng1) - this.Rad(lng2);
			      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			      s = s * 6378.137;
			      s = Math.round(s * 10000) / 10000;
			      s = s.toFixed(1)  //保留两位小数
			      console.log('经纬度计算的距离:' + s)
			      return s
			  },
	
		}
	}
</script>
<style lang="scss" scoped >
.container{
	padding: 50rpx 32rpx;
	.icon-a-xingzhuang1{
		color: rgba(209,184,125,1);
		font-size: 42rpx !important;
	}
	.icon-weixuanzhong{
		color: #979797;
		font-size: 42rpx !important;
	}
	u-icon{
		margin-right: 15rpx;
	}
	.common{
		.title{
			font-size: 26rpx;
			color: #4D5562;
			padding: 32rpx 32rpx 30rpx 0;
		}
		.list{
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			&__left{
				width: 104rpx;
				height: 104rpx;
				image{
					width: 104rpx;
					height: 104rpx;
				}
			}
			&__right{
				width: 600rpx;
				margin-left: 19rpx;
				position: relative;
				overflow: hidden;
				&-img{
					position: absolute;
					right: 0;
					top: 0;
					width: 70rpx;
					height: 36rpx;
				}
				&-xuan{
					position: absolute;
					right: 0;
					top: 0;
					width: 70rpx;
					height: 36rpx;
					border-radius: 22rpx 22rpx 22rpx 22rpx;
					border: 2rpx solid #007664;
					font-size: 18rpx;
					color: #007664;
					text-align: center;
					line-height: 30rpx;
				}
			}
			&-fen{
				font-size: 28rpx;
				margin: 5rpx 0 5rpx 0;
				&-size{
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
			.listT{
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #242833;
				font-size: 28rpx;
				.right{
					image{
						width: 20rpx;
						height: 20rpx;
						position: relative;
						top: 2rpx;
						margin-right: 10rpx;
					}
				}
			}
			.listB{
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding: 27rpx 0 40rpx 0;
				color: #999999;
				font-size: 20rpx;
				.dec{
					width: 70%;
					overflow: hidden;
					  white-space: nowrap;
					  text-overflow: ellipsis;
				}
				.right{
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #999999;
					image{
						width: 20rpx;
						height: 20rpx;
						position: relative;
						top: 2rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	.shopList{
		.list{
			margin-bottom: 30rpx;
		}
	}
	.noShop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		background: #ffffff;
		border-radius: 20rpx;
		color: #333333;
		font-size: 26rpx;
		padding: 0 32rpx;
		margin-top: 20rpx;
	}
	.serchBox{
		height: 72rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		padding:  0 26rpx;
		// margin-bottom: 30rpx;
		box-shadow: 0px 2rpx 10rpx 0px rgba(0,0,0,0.07); 
		input{
			flex: 1;
			color: #333;
			font-size: 30rpx;
			margin-left: 22rpx;
			height: 100%;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
